<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--4.下拉菜单
         点击菜单的时候显示下拉列表
        点击列表每一项的时候隐藏下拉列表
        菜单变成显示的内容 -->
    <div>菜单</div>
    <ul>

    </ul>
    <script>
        var div = document.getElementsByTagName("div")[0];
        var uls = document.getElementsByTagName("ul")[0];
        var arr = ["鸡蛋", "鸡肉", "鸡大腿", "肉", "很多好吃的"]
        var str = ""
        arr.forEach(function (item) {
            str += `<li>${item}</li>`;
        })
        div.onclick = function () {
            uls.innerHTML = str;
            var lis = document.getElementsByTagName("li");

            for (let i = 0; i < [...lis].length; i++) {
                [...lis][i].onclick = function () {
                    uls.style.display = "none";
                    div.innerHTML = `${arr[i]}`
                }
            }
        }





    </script>
</body>

</html>